<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线</title>
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../CSS/style.css">
</head>

<body>
    <div class="container">
        <!-- 顶部容器 -->
        <div class="top-container">
            <div class="top-box wrap">
                <!-- 顶部第一个容器 -->
                <div class="top-first-box">
                    <img src="../images/logo.png" alt="">
                </div>
                <!-- 顶部第二个容器 -->
                <ul class="top-second-box">
                    <li><a href="#" class="blue-border">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
                <!-- 顶部第三个容器 -->
                <div class="top-third-box">
                    <input type="text" class="input-area" placeholder="输入关键词">
                    <input type="image" class="search-button" src="../images/btn.png">
                </div>
                <!-- 顶部第四个容器 -->
                <div class="top-four-box">
                    <a href="#">
                        <div>
                            <img src="../images/user.png" alt="头像">
                        </div>
                        <div>
                            qq-leishui
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- banner层 -->
        <div class="banner-box">
            <!-- banner层内容，设置版心类 -->
            <div class="banner wrap">
                <!-- 左侧导航栏 -->
                <div class="nav">
                    <ul>
                        <li>
                            <a href="#" style="color: #00a4f9;">
                                前端开发<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                后端开发<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                移动开发<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                人工智能<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                商业预测<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                云计算&大数据<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                运维&从测试<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                UI设计<span>&gt;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                产品<span>&gt;</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 中间指示层 -->
                <div class="slider">
                    <ul>
                        <li class="bigger-circle"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <!-- 右侧课程表 -->
                <div class="class-table">
                    <!-- 头部标题 -->
                    <h2 class="title">
                        我的课程表
                    </h2>
                    <!-- 中间内容 -->
                    <ul class="content">
                        <li>
                            <p>继续学习 程序语言设计</p>
                            <a href="#">正在学习-使用对象</a>
                        </li>
                        <li>
                            <p>继续学习 程序语言设计</p>
                            <a href="#">正在学习-使用对象</a>
                        </li>
                        <li>
                            <p>继续学习 程序语言设计</p>
                            <a href="#">正在学习-使用对象</a>
                        </li>
                    </ul>
                    <!-- 底部按钮 -->
                    <a href="#" class="btn-bottom">全部课程</a>
                </div>
            </div>
        </div>
        <!-- 课程索引层 -->
        <div class="course-nav wrap">
            <ul>
                <li>精品推荐</li>
                <li><a href="#">Jquery</a></li>
                <li><a href="#">Spark</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaWeb</a></li>
                <li><a href="#">Mysql</a></li>
                <li style="border: none;"><a href="#">JavaWeb</a></li>
            </ul>
            <div class="right-a">
                <a href="#" style="color: #00a4f9;">修改兴趣</a>
            </div>
        </div>
        <!-- 精品课程信息层 -->
        <div class="course-container wrap">
            <h2 class="top-title">
                精品推荐
                <a href="#" class="flR">查看全部</a>
            </h2>
            <div class="top">
                <a class="course-box" href="#">
                    <img src="../images/pro1.png" alt="">
                    <div class="course-box-bottom">
                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro2.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android 网络图片加载框架详解</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro3.png" alt="">
                    <div class="course-box-bottom">
                        <p>Angular 2 最新框架+主流技术+项目实战</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro4.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro4.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <!-- 精品课程上行的两个图标 -->
                <img src="../images/hot.png" alt="" class="hot">
                <img src="../images/new.png" alt="" class="new">
            </div>
            <!-- 下部分 -->
            <div class="bottom">
                <a class="course-box" href="#">
                    <img src="../images/pro1.png" alt="">
                    <div class="course-box-bottom">
                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro2.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android 网络图片加载框架详解</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro3.png" alt="">
                    <div class="course-box-bottom">
                        <p>Angular 2 最新框架+主流技术+项目实战</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro4.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro4.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 1125人在学习
                        </p>
                    </div>
                </a>
                <!-- 精品课程下行的两个图标 -->
                <img src="../images/hot.png" alt="" class="hot">
                <img src="../images/new.png" alt="" class="new">
            </div>
        </div>

        <!-- 编程课程入门第一层 -->
        <div class="code-box wrap">
            <!-- 第一层标题栏 -->
            <div class="code-box-title flex-row">
                <h2>编程入门</h2>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部</a>
            </div>
            <!-- 第一层内容 -->
            <div class="code-box-content">
                <!-- 内容左部分 -->
                <div class="code-box-left" style="background: url(../images/php1.png);">
                    <div class="index">
                        <h2 class="php">PHP入门：</h2>
                        <h2>基础语法到实际运用</h2>
                        <ul>
                            <li>零基础入门：语法与界</li>
                            <li>进阶：网络与数据缓存</li>
                            <li>界面到数据存储</li>
                        </ul>
                    </div>
                </div>
                <!-- 内容右部分 -->
                <div class="code-box-right">
                    <div class="top-bar"></div>
                    <div class="bottom-box">
                        <!-- 底部四个盒子 -->
                        <a class="course-box" href="#">
                            <img src="../images/pro8.png" alt="">
                            <div class="course-box-bottom">
                                <p>Android Hybrid APP开发实战 H5+原生！</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro9.png" alt="">
                            <div class="course-box-bottom">
                                <p class="m-text">Kami2首页界面切换效果</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro7.png" alt="">
                            <div class="course-box-bottom">
                                <p class="m-text">Unity Profiler入门</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro6.png" alt="">
                            <div class="course-box-bottom">
                                <p>Cocos2d-x 引擎源码中的纹理优化</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>                    
                    </div>
                </div>
            </div>
        </div>
        <!-- 编程内容第二层 -->
        <div class="code-box wrap">
            <!-- 第二层标题栏 -->
            <div class="code-box-title flex-row">
                <h2>编程入门</h2>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部</a>
            </div>
            <!-- 第二层内容 -->
            <div class="code-box-content">
                <!-- 内容左部分 -->
                <div class="code-box-left" style="background: url(../images/php2.png);">
                    <div class="index">
                        <h2 class="php">PHP入门：</h2>
                        <h2>基础语法到实际运用</h2>
                        <ul>
                            <li>零基础入门：语法与界</li>
                            <li>进阶：网络与数据缓存</li>
                            <li>界面到数据存储</li>
                        </ul>
                    </div>
                </div>
                <!-- 内容右部分 -->
                <div class="code-box-right">
                <div class="top-bar" style="background:url(../images/python2.png)"></div>
                    <div class="bottom-box">
                        <!-- 底部四个盒子 -->
                        <a class="course-box" href="#">
                            <img src="../images/pro9.png" alt="">
                            <div class="course-box-bottom">
                                <p class="m-text">Kami2首页界面切换效果</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro8.png" alt="">
                            <div class="course-box-bottom">
                                <p>Android Hybrid APP开发实战 H5+原生！</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro7.png" alt="">
                            <div class="course-box-bottom">
                                <p>Cocos2d-x 引擎源码中的纹理优化</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>
                        <a class="course-box" href="#">
                            <img src="../images/pro6.png" alt="">
                            <div class="course-box-bottom">
                                <p class="m-text">Unity Profiler入门</p>
                                <p>
                                    <span>高级</span>
                                    • 1125人在学习
                                </p>
                            </div>
                        </a>                    
                    </div>
                </div>
            </div>
        </div>
        <!-- 编程内容第三层 -->
        <div class="code-box wrap">
            <!-- 第二层标题栏 -->
            <div class="code-box-title flex-row">
                <h2>机器学习工程师</h2>
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部</a>
            </div>
            <!-- 机器学习课程第一层 -->
            <div class="top flex-row">
                <a class="course-box" href="#">
                    <img src="../images/pro8.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 125人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro6.png" alt="">
                    <div class="course-box-bottom">
                        <p>Cocos2d-x 引擎源码中的纹理优化</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro7.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">Unity Profiler入门</p>
                        <p>
                            <span>高级</span>
                            • 178人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro5.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">微软人工智能-数分析平台</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro9.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">Kami2首页界面切换效果</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <div class="code-box wrap">
            <!-- 第二层标题栏 -->
            <div class="code-box-title flex-row">
                <h2>机器学习工程师</h2>
                <ul class="flex-row">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部</a>
            </div>
            <!-- 机器学习课程第二层 -->
            <div class="bottom flex-row">
                <a class="course-box" href="#">
                    <img src="../images/pro5.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">微软人工智能-数分析平台</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro7.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">Unity Profiler入门</p>
                        <p>
                            <span>高级</span>
                            • 178人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro6.png" alt="">
                    <div class="course-box-bottom">
                        <p>Cocos2d-x 引擎源码中的纹理优化</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro9.png" alt="">
                    <div class="course-box-bottom">
                        <p class="m-text">Kami2首页界面切换效果</p>
                        <p>
                            <span>高级</span>
                            • 11250人在学习
                        </p>
                    </div>
                </a>
                <a class="course-box" href="#">
                    <img src="../images/pro8.png" alt="">
                    <div class="course-box-bottom">
                        <p>Android Hybrid APP开发实战 H5+原生！</p>
                        <p>
                            <span>高级</span>
                            • 125人在学习
                        </p>
                    </div>
                </a>
             </div>   
        </div>
        <div class="bottom-container">
            <!-- 底部版心容器 -->
            <div class="bottom-box wrap">
                <!-- 底部最左容器 -->
                <div class="left">
                    <!-- 底部左容器最上面容器 -->
                    <div class="left-top">
                        <a href="#">
                            <img src="../images/logo.png" alt="logo">
                        </a>
                    </div>
                    <!-- 底部左容器中间容器 -->
                    <p class="left-middle">
                        学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
                    </p>
                    <!-- 底部左容器底部容器 -->
                    <div class="left-bottom">
                        <a href="#">下载APP</a>
                    </div>
                </div>
                <!-- 底部右边容器 -->
                <div class="right">
                    <!-- 底部右边第一个容器 -->
                    <div class="right-first text-box">
                        <ul>
                            <li class="title">关于学成网</li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">管理团队</a></li>
                            <li><a href="#">工作机会</a></li>
                            <li><a href="#">客户服务</a></li>
                            <li><a href="#">帮助</a></li>
                        </ul>
                    </div>
                    <!-- 底部右边中间容器 -->
                    <div class="right-center text-box">
                        <ul>
                            <li class="title">新手指南</li>
                            <li><a href="#">如何注册</a></li>
                            <li><a href="#">如何选课</a></li>
                            <li><a href="#">如何拿到毕业证</a></li>
                            <li><a href="#">学分是什么</a></li>
                            <li><a href="#">考试未通过怎么办</a></li>
                        </ul>
                    </div>
                    <!-- 底部右边最后一个容器 -->
                    <div class="right-last">
                        <ul>
                            <li class="title">合作伙伴</li>
                            <li><a href="#">合作机构</a></li>
                            <li><a href="#">合作导师</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<!-- 228px,270px -->
